<template>
  <div>
    <el-container>
      <el-aside>
        <el-menu
            class="chapters"
            :default-active="chapter_id.toString()"
            active-text-color="red">
          <el-menu-item
              v-for="chapter in chapters"
              :key="chapter.id"
              :index="chapter.id.toString()"
              @click="loadParagraph(chapter.id)">
            <span slot="title">{{ chapter.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="text" v-if="chapters.length > 0">
        <div class="title">{{ currentChapter.title }}</div>
          <div v-for="para in paragraphs" :key="para.id">
            <div v-html="para.content"></div>
          </div>
      </div>
      <div v-else>Loading...</div>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "ShowBook",
  data() {
    return {
      chapter_id: '',
      chapters: [],
      paragraphs: []
    }
  },
  computed: {
    currentChapter() {
      return this.chapters.find(chapter => chapter.id === this.chapter_id) || {};
    }
  },
  created() {
    this.loadText();
  },
  methods: {
    loadText() {
      let bookId = this.$route.query.book_id;
      let volumeId = this.$route.query.volume_id
      this.$axios.get(`/chapter?book_id=${bookId}&volume_id=${volumeId}`)
          .then(resp => {
            if (resp && resp.status === 200) {
              this.chapters = resp.data;
              if (this.chapters.length > 0) {
                this.loadParagraph(this.chapters[0].id);
              }
            }
          })
          .catch(error => {
            console.error('Error loading chapters:', error);
          });
    },
    loadParagraph(chapter_id) {
      let bookId = this.$route.query.book_id;
      let volumeId = this.$route.query.volume_id
      this.chapter_id = chapter_id;
      this.$axios.get(`/paragraph?book_id=${bookId}&volume_id=${volumeId}&chapter_id=${chapter_id}`)
          .then(resp => {
            if (resp && resp.status === 200) {
              this.paragraphs = resp.data;
            }
          })
          .catch(error => {
            console.error('Error loading paragraphs:', error);
          });
    }
  }
}
</script>

<style scoped>
.text{
  position: relative;
  margin: 0 auto;
  width: 720px;
  font-size: 18px;
  //overflow: hidden;
  height: 100vh;
  transition: opacity .4s;
}
.chapters {
  position: absolute;
  margin-left: 50%;
  left: -600px;
  top: 100px;
  width: 150px;
}
.text .title{
  color: #333;
  font-size: 24px;
  text-align: center;
  margin-top: 50px;
}
.text .l{
  position: relative;
  text-align: left;
  color: #111;
  text-indent: 35px;
  font-size: 16px;
  line-height: 25px;
  margin-top: 22px;
}
.text .content{
  min-height: 2500px;
}
.footer{
  display: flex;
  justify-content: space-around;
  margin: 40px 0px;
}
</style>